<div class="environment-selector-btn">
  {{ "loggingInOn" | i18n }}:
  <button
    type="button"
    (click)="toggle(null)"
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin"
    aria-haspopup="dialog"
    aria-controls="cdk-overlay-container"
    [ngSwitch]="selectedEnvironment"
  >
    <span *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{
      "usDomain" | i18n
    }}</span>
    <span *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{
      "euDomain" | i18n
    }}</span>
    <span *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
      "selfHostedServer" | i18n
    }}</span>
    <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
  </button>
</div>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
  [cdkConnectedOverlayPositions]="overlayPosition"
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
  (backdropClick)="isOpen = false"
  (detach)="close()"
>
  <div class="box-content">
    <div
      class="environment-selector-dialog"
      [@transformPanel]="'open'"
      cdkTrapFocus
      cdkTrapFocusAutoCapture
      role="dialog"
      aria-modal="true"
    >
      <button
        type="button"
        class="environment-selector-dialog-item"
        (click)="toggle(ServerEnvironmentType.US)"
        [attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.US ? 'true' : 'false'"
      >
        <i
          class="bwi bwi-fw bwi-sm bwi-check"
          style="padding-bottom: 1px"
          aria-hidden="true"
          [style.visibility]="
            selectedEnvironment === ServerEnvironmentType.US ? 'visible' : 'hidden'
          "
        ></i>
        <span>{{ "usDomain" | i18n }}</span>
      </button>
      <br />
      <button
        type="button"
        class="environment-selector-dialog-item"
        (click)="toggle(ServerEnvironmentType.EU)"
        [attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.EU ? 'true' : 'false'"
      >
        <i
          class="bwi bwi-fw bwi-sm bwi-check"
          style="padding-bottom: 1px"
          aria-hidden="true"
          [style.visibility]="
            selectedEnvironment === ServerEnvironmentType.EU ? 'visible' : 'hidden'
          "
        ></i>
        <span>{{ "euDomain" | i18n }}</span>
      </button>
      <br />
      <button
        type="button"
        class="environment-selector-dialog-item"
        (click)="toggle(ServerEnvironmentType.SelfHosted)"
        [attr.aria-pressed]="
          selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'true' : 'false'
        "
      >
        <i
          class="bwi bwi-fw bwi-sm bwi-check"
          style="padding-bottom: 1px"
          aria-hidden="true"
          [style.visibility]="
            selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'visible' : 'hidden'
          "
        ></i>
        <span>{{ "selfHostedServer" | i18n }}</span>
      </button>
    </div>
  </div>
</ng-template>
